<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="员工绩效-定制化"
        data-page-identification="y_auhlddz3b2"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_i5vpkrwxor 自定义模板_91za6gac5d -->
            <a-modal :body-style="bodyStyle" v-model:visible="ygState.exportScoreVisible" centered width="580px">
                <template #title>
                    <span class="modal-title">导出绩效分数</span>
                </template>
                <div class="export-title">
                    <div>
                        <ExclamationCircleFilled style="color: #3875ff" />
                    </div>
                    <div class="export-content"
                        >请下载模板，并根据模板中的各组织架构调整对应的员工名称后上传，系统将根据您调整的组织架构名称和员工名称填入对应员工的绩效详情。</div
                    >
                </div>
                <div class="tip">注意：请勿增加【列】、三行以上的空白【行】或其他【特殊标点符号】。</div>
                <div class="tip" style="margin-left: 40px">上传前对文件进行解密</div>
                <a-upload
                    :file-list="ygState.fileList"
                    :before-upload="handlerUpload"
                    @remove="handleRemove"
                    accept=".xlsx,.xls"
                >
                    <a-button type="primary">
                        <upload-outlined />
                        上传
                    </a-button>
                </a-upload>
                <span>支持格式:.xlsx,.xls</span>
                <template #footer>
                    <a-button type="ghost" @click="closeExport">取消</a-button>
                    <a-button type="primary" @click="downScoreTemplate">下载模板</a-button>
                    <a-button type="primary" @click="handlerUploadScore" :loading="exportLoading"
                        >导出绩效分数</a-button
                    >
                </template>
            </a-modal>

            <!--          加减分弹窗-->
            <a-modal
                :body-style="bodyStyle"
                v-model:visible="ygState.addOrReduceVisible"
                centered
                width="410px"
                :ok-button-props="{ loading: addOrReduceLoading }"
                @ok="handlerSubmitScore"
                :after-close="resetPlusMinusForm"
            >
                <template #title>
                    <span class="modal-title">加减分</span>
                </template>
                <a-form :model="plusMinusPoints" ref="scoreRef">
                    <a-form-item
                        label="类型"
                        :label-col="{ span: 7 }"
                        name="type"
                        :rules="{ required: true, message: '请选择加减分类型', trigger: 'blur' }"
                    >
                        <a-radio-group v-model:value="plusMinusPoints.type">
                            <a-radio value="加分">加分</a-radio>
                            <a-radio value="减分">减分</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item
                        name="score"
                        label="分数"
                        :label-col="{ span: 7 }"
                        :rules="[
                            {
                                required: true,
                                pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                message: '请输入大于0的数字(支持0.5的倍数)',
                                trigger: 'blur'
                            }
                        ]"
                    >
                        <a-input-number
                            placeholder="请输入分数，支持以0.5为倍数的数字"
                            v-model:value="plusMinusPoints.score"
                            style="width: 100%"
                        />
                    </a-form-item>
                    <a-form-item
                        name="detail"
                        label="加减分详情"
                        :label-col="{ span: 7 }"
                        :rules="[{ required: true, message: '请输入加减分详情', trigger: 'blur' }]"
                    >
                        <a-input placeholder="请输入加减分详情" v-model:value="plusMinusPoints.detail" />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!--          加减分弹窗-->
            <!--          导出弹窗-->
            <div class="ygjx-div">
                <a-row :gutter="16">
                    <a-col :span="4">
                        <div class="left-tree">
                            <span class="tree-title">组织架构</span>
                            <a-input-search
                                v-model:value="ygState.searchValue"
                                style="margin-bottom: 8px"
                                placeholder="请输入"
                                @change="getStaffTree"
                            />
                            <a-tree
                                v-model:expandedKeys="ygState.expandedKeys"
                                v-model:selectedKeys="ygState.selectedKeys"
                                v-model:checkedKeys="ygState.checkedKeys"
                                :tree-data="ygState.treeData"
                                :fieldNames="{ children: 'children', title: 'name', key: 'staffInfoId' }"
                                @select="treeSelect"
                                :height="630"
                            />
                        </div>
                    </a-col>
                    <a-col :span="20">
                        <!--                      选择组时显示列表-->
                        <div v-if="ygState.staffType === 'DEPARTMENT'" class="right-div">
                            <span class="right-title">{{ ygState.dateStr }}绩效列表</span>
                            <a-row v-if="ygState.selected.name === '全部'" class="row-size" :gutter="24">
                                <a-col :span="7" class="row-size">
                                    <a-form-item label="项目名称">
                                        <a-tree-select
                                            v-model:value="ygState.filter.projectName"
                                            show-search
                                            style="width: 100%"
                                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                            placeholder="请选择"
                                            allow-clear
                                            tree-default-expand-all
                                            :tree-data="ygState.projectNameList"
                                            :fieldNames="{
                                                children: 'children',
                                                label: 'name',
                                                value: 'id',
                                                key: 'projectId'
                                            }"
                                            :filterTreeNode="
                                                (inputValue, treeNode) => {
                                                    return (
                                                        treeNode.name.toLowerCase().indexOf(inputValue.toLowerCase()) >=
                                                        0
                                                    )
                                                }
                                            "
                                            :max-tag-count="1"
                                            @focus="getTree"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col class="row-size" :span="6">
                                    <a-form-item label="月份筛选">
                                        <a-date-picker
                                            v-model:value="ygState.filter.month"
                                            picker="month"
                                            value-format="YYYY-MM"
                                            style="width: 100%"
                                            :allowClear="false"
                                            :disabled-date="disabledDate"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col class="row-size" :span="6">
                                    <a-space size="middle">
                                        <a-button type="primary" @click="getGroupTableData()">查询</a-button>
                                        <a-button type="ghost" @click="resetTableData">重置</a-button>
                                    </a-space>
                                </a-col>
                                <a-col :span="5" style="display: flex; justify-content: end" class="row-size">
                                    <a-space size="middle">
                                        <a-button
                                            class="ant-btn-primary"
                                            type="ghost"
                                            @click="batchAdditionAndSubtractionPoints('批量', null)"
                                            >批量加减分</a-button
                                        >
                                        <a-button class="ant-btn-primary" type="ghost" @click="exportPerformanceScores"
                                            >导出绩效分数</a-button
                                        >
                                    </a-space>
                                </a-col>
                            </a-row>
                            <a-row v-else class="row-size" :gutter="24">
                                <a-col class="row-size" :span="6">
                                    <a-form-item label="月份筛选">
                                        <a-date-picker
                                            v-model:value="ygState.filter.month"
                                            picker="month"
                                            value-format="YYYY-MM"
                                            style="width: 100%"
                                            :allowClear="false"
                                            :disabled-date="disabledDate"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col class="row-size" :span="6">
                                    <a-space size="middle">
                                        <a-button type="primary" @click="getGroupTableData()">查询</a-button>
                                        <a-button type="ghost" @click="resetTableData">重置</a-button>
                                    </a-space>
                                </a-col>
                                <a-col :span="12" style="display: flex; justify-content: end" class="row-size">
                                    <a-space size="middle">
                                        <a-button
                                            class="ant-btn-primary"
                                            type="ghost"
                                            @click="batchAdditionAndSubtractionPoints('批量', null)"
                                            >批量加减分</a-button
                                        >
                                        <a-button class="ant-btn-primary" type="ghost" @click="exportPerformanceScores"
                                            >导出绩效分数</a-button
                                        >
                                    </a-space>
                                </a-col>
                            </a-row>
                            <div class="yg-table">
                                <a-table
                                    row-key="id"
                                    bordered
                                    :row-selection="{
                                        selectedRowKeys: ygState.selectedRowKeys,
                                        onChange: onSelectChange,
                                        fixed: true
                                    }"
                                    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                                    :scroll="{ x: 'max-content', y: '600px' }"
                                    :columns="columns"
                                    :data-source="ygState.tableData"
                                    @resizeColumn="handleTaskResizeColumn"
                                    :pagination="false"
                                >
                                    <template #bodyCell="{ column, record, text, index }">
                                        <template v-if="column.dataIndex === 'numIndex'">
                                            {{ index + 1 }}
                                        </template>
                                        <template v-if="column.dataIndex === 'userName'">
                                            {{ text }}
                                            <a-tooltip>
                                                <template #title v-if="record.templateProjectPm"
                                                    >模板项目项目经理</template
                                                >
                                                <template #title v-else-if="record.otherProjectPm"
                                                    >非模板项目项目经理</template
                                                >
                                                <div class="user-img" v-if="record.templateProjectPm">
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink"
                                                        width="11.8px"
                                                        height="13px"
                                                        viewBox="0 0 11.8 13"
                                                        version="1.1"
                                                    >
                                                        <title>模板项目项目经理</title>
                                                        <g
                                                            id="页面-1"
                                                            stroke="none"
                                                            stroke-width="1"
                                                            fill="none"
                                                            fill-rule="evenodd"
                                                        >
                                                            <g
                                                                id="员工绩效-新增需求-标注"
                                                                transform="translate(-774.5, -747.5)"
                                                            >
                                                                <g
                                                                    id="模板项目项目经理"
                                                                    transform="translate(772, 746)"
                                                                >
                                                                    <rect
                                                                        id="矩形"
                                                                        x="0"
                                                                        y="0"
                                                                        width="16"
                                                                        height="16"
                                                                    />
                                                                    <g
                                                                        id="编组"
                                                                        transform="translate(3, 2)"
                                                                        fill="#3875FF"
                                                                        stroke="#3875FF"
                                                                        stroke-linecap="round"
                                                                        stroke-linejoin="round"
                                                                    >
                                                                        <circle
                                                                            id="椭圆形"
                                                                            fill-rule="nonzero"
                                                                            cx="5.4"
                                                                            cy="2.4"
                                                                            r="2.4"
                                                                        />
                                                                        <path
                                                                            d="M5.46497508,6.60038287 C8.41736628,6.635194 10.8,9.03935846 10.8,12 L0,12 C0,9.01767 2.41767,6.6 5.4,6.6 L5.334,6.601 L4.22902169,10.4002766 C4.2108274,10.4627952 4.22420585,10.5302573 4.26488118,10.5811015 L5.24382624,11.8047828 C5.31282815,11.8910352 5.43868662,11.9050195 5.52493901,11.8360175 C5.53647195,11.8267912 5.54694741,11.8163157 5.55617376,11.8047828 L6.53511882,10.5811015 C6.57579415,10.5302573 6.5891726,10.4627952 6.57097831,10.4002766 Z"
                                                                            id="形状结合"
                                                                        />
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                                <div class="user-img" v-if="record.otherProjectPm">
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        xmlns:xlink="http://www.w3.org/1999/xlink"
                                                        width="16px"
                                                        height="16px"
                                                        viewBox="0 0 16 16"
                                                        version="1.1"
                                                    >
                                                        <title>模板项目项目经理-绿</title>
                                                        <g
                                                            id="页面-1"
                                                            stroke="none"
                                                            stroke-width="1"
                                                            fill="none"
                                                            fill-rule="evenodd"
                                                        >
                                                            <g id="模板项目项目经理-绿">
                                                                <rect id="矩形" x="0" y="0" width="16" height="16" />
                                                                <g
                                                                    id="编组"
                                                                    stroke-linecap="round"
                                                                    stroke-linejoin="round"
                                                                    transform="translate(3, 2)"
                                                                    fill="#30BF78"
                                                                    fill-rule="nonzero"
                                                                    stroke="#30BF78"
                                                                >
                                                                    <circle id="椭圆形" cx="5.4" cy="2.4" r="2.4" />
                                                                    <path
                                                                        d="M5.46497508,6.60038287 C8.41736628,6.635194 10.8,9.03935846 10.8,12 L0,12 C0,9.01767 2.41767,6.6 5.4,6.6 L5.334,6.601 L4.22902169,10.4002766 C4.2108274,10.4627952 4.22420585,10.5302573 4.26488118,10.5811015 L5.24382624,11.8047828 C5.31282815,11.8910352 5.43868662,11.9050195 5.52493901,11.8360175 C5.53647195,11.8267912 5.54694741,11.8163157 5.55617376,11.8047828 L6.53511882,10.5811015 C6.57579415,10.5302573 6.5891726,10.4627952 6.57097831,10.4002766 L5.46497508,6.60038287 Z"
                                                                        id="形状结合"
                                                                    />
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </svg>
                                                </div>
                                            </a-tooltip>
                                        </template>
                                        <!--                       修正手动加减分               -->
                                        <template v-if="column.dataIndex === 'scoreChangesNum'">
                                            <div v-if="record.scoreChangesNum > 0" class="green-num"
                                                >+{{ record.scoreChangesNum }}</div
                                            >
                                            <div v-if="record.scoreChangesNum < 0" class="red-num">{{
                                                record.scoreChangesNum
                                            }}</div>
                                            <div v-if="record.scoreChangesNum === 0" class="default-num"
                                                >+{{ record.scoreChangesNum }}</div
                                            >
                                        </template>
                                        <template v-if="column.dataIndex === 'scoreChangesDetails'">
                                            <a-tooltip @mouseenter="handlerGetStandard(record)">
                                                <template #title>
                                                    <p
                                                        style="margin: 0"
                                                        v-for="(item, index) in standardList"
                                                        :key="index"
                                                        >{{ item }}</p
                                                    >
                                                </template>
                                                <div
                                                    style="
                                                        width: 135px;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                    "
                                                >
                                                    {{ text }}</div
                                                >
                                            </a-tooltip>
                                        </template>
                                        <!--                                      系统加减分-->
                                        <template v-if="column.dataIndex === 'systemScoreChanges'">
                                            <div v-if="record.systemScoreChanges > 0" class="green-num"
                                                >+{{ record.systemScoreChanges }}</div
                                            >
                                            <div v-if="record.systemScoreChanges < 0" class="red-num">{{
                                                record.systemScoreChanges
                                            }}</div>
                                            <div v-if="record.systemScoreChanges === 0" class="default-num"
                                                >+{{ record.systemScoreChanges }}</div
                                            >
                                        </template>
                                        <!--                                      项目经理评分-->
                                        <!--                                        <template v-if="column.dataIndex === 'projectDirectorFraction'">-->
                                        <!--                                            <div v-if="!record.templateProjectPm" class="disabled-div"></div>-->

                                        <!--                                            <span v-else>{{ record.projectDirectorFraction || '未评分' }}</span>-->
                                        <!--                                        </template>-->
                                        <!--                                        &lt;!&ndash;                                      项目经理评分&ndash;&gt;-->
                                        <!--                                        &lt;!&ndash;                                     业务专家评分&ndash;&gt;-->
                                        <!--                                        <template v-if="column.dataIndex === 'businessExpertFraction'">-->
                                        <!--                                            <div v-if="!record.templateProjectPm" class="disabled-div"></div>-->

                                        <!--                                            <span v-else>{{ record.businessExpertFraction || '未评分' }}</span>-->
                                        <!--                                        </template>-->
                                        <!--                                      业务专家评分-->
                                        <template v-if="column.dataIndex === 'operate'">
                                            <a-button type="link" size="small" @click="handlerDetail(record)"
                                                >系统核算分详情</a-button
                                            >
                                            <a-button
                                                type="link"
                                                size="small"
                                                @click="batchAdditionAndSubtractionPoints('单独', record)"
                                                >加减分</a-button
                                            >
                                            <a-button
                                                v-if="record.templateProjectPm || record.otherProjectPm"
                                                type="link"
                                                size="small"
                                                @click="handlerPerformanceScoring(record)"
                                                >绩效打分</a-button
                                            >
                                        </template>
                                    </template>
                                </a-table>
                            </div>
                        </div>
                        <!--                      选择组时显示列表-->
                        <!--                      选择人时显示员工绩效详情-->
                        <div class="jx-detail" v-if="ygState.staffType === 'EMPLOYEE'">
                            <div class="detail-top">
                                <div class="detail-title">{{ ygState.dateStr }}绩效列表</div>
                                <div class="detail-title">
                                    <a-button
                                        type="link"
                                        v-if="ygState.isTableIn"
                                        @click="ygState.staffType = 'DEPARTMENT'"
                                        >返回</a-button
                                    >
                                    <!--                                    <a-date-picker-->
                                    <!--                                        v-model:value="detailState.detailDate"-->
                                    <!--                                        picker="month"-->
                                    <!--                                        value-format="YYYY-MM"-->
                                    <!--                                        style="width: 300px"-->
                                    <!--                                        @change="handlerChangeDate"-->
                                    <!--                                        :allowClear="false"-->
                                    <!--                                    />-->
                                </div>
                            </div>
                            <!--                    个人信息      -->
                            <div :class="['detail-msg', { short: !isCurrentMonth() }]">
                                <div class="other">
                                    <div class="other-top">
                                        <div class="other-top-item">
                                            <span class="people-name">{{ detailState.peopleDetail.userName }}</span>
                                            <span class="department-title">{{
                                                detailState.peopleDetail.departmentName
                                            }}</span>
                                            <span class="title-tip" v-if="detailState.peopleDetail.templateProjectPm"
                                                >--模板项目项目经理</span
                                            >
                                            <span class="title-tip" v-if="detailState.peopleDetail.otherProjectPm"
                                                >--非模板项目项目经理</span
                                            >
                                        </div>
                                    </div>
                                    <div class="other-middle" v-if="isCurrentMonth()"
                                        ><BellFilled style="color: #f7b500; margin-right: 8px" />
                                        绩效成绩每日0点试算，不代表最终成绩，超过自然月后，由领导手动生成绩效成绩覆盖试运算成绩。</div
                                    >
                                    <div class="other-bottom">
                                        <div class="other-bottom-item">
                                            <span class="normal-font">最终绩效分数</span>
                                            <span class="weight-font color-font">{{
                                                detailState.peopleDetail.finalPerformanceScore
                                            }}</span>

                                            <a-tooltip
                                                :overlay-style="{
                                                    maxWidth: '500px'
                                                }"
                                            >
                                                <template #title
                                                    >通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分+日报、全勤最终绩效分数+月度修正得分；<br />

                                                    如果用户为水泥配料模板项目项目经理，该用户的项目核算分（通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分）将乘以70%，剩余30%的项目绩效成绩将由业务专家和项目总监各自负责15%（最多15分，最少0分）的绩效打分；<br />

                                                    如果用户为水泥配送、煤炭供应链项目经理或漳县试点项目经理，该用户的项目核算分（通用项目最终绩效分数+模板项目最终绩效分数+行动项最终绩效得分）将乘以70%，剩余30%的项目绩效成绩将由项目总监负责30%（最多30分，最少0分）的绩效打分；
                                                </template>
                                                <ExclamationCircleOutlined
                                                    style="margin-left: 4px; top: 8px"
                                                    class=""
                                                />
                                            </a-tooltip>
                                        </div>
                                        <!--               项目总监评分                       -->
                                        <div
                                            class="other-bottom-item"
                                            v-if="
                                                detailState.peopleDetail.templateProjectPm ||
                                                detailState.peopleDetail.otherProjectPm
                                            "
                                        >
                                            <span class="normal-font">项目总监评分</span>
                                            <span
                                                class="weight-font"
                                                v-if="detailState.peopleDetail.projectDirectorFraction"
                                                >{{ detailState.peopleDetail.projectDirectorFraction }}</span
                                            >
                                            <span class="weight-font" style="font-size: 16px" v-else>待评分</span>
                                            <span
                                                class="unit-font"
                                                v-if="detailState.peopleDetail.projectDirectorFraction"
                                                >分</span
                                            >
                                        </div>
                                        <!--               项目总监评分                       -->
                                        <!--               业务专家评分                       -->
                                        <div
                                            class="other-bottom-item"
                                            v-if="detailState.peopleDetail.templateProjectPm"
                                        >
                                            <span class="normal-font">业务专家评分</span>
                                            <span
                                                class="weight-font"
                                                v-if="detailState.peopleDetail.businessExpertFraction"
                                                >{{ detailState.peopleDetail.businessExpertFraction }}</span
                                            >
                                            <span class="weight-font" style="font-size: 16px" v-else>待评分</span>
                                            <span
                                                class="unit-font"
                                                v-if="detailState.peopleDetail.businessExpertFraction"
                                                >分</span
                                            >
                                        </div>
                                        <!--               业务专家评分                       -->
                                        <!--                              本月参与项目-->
                                        <div class="other-bottom-item">
                                            <span class="normal-font">本月参加项目数</span>
                                            <span class="weight-font">{{
                                                detailState.peopleDetail.projectNum || 0
                                            }}</span>
                                            <span class="unit-font">个</span>
                                        </div>

                                        <!--                              本月参与项目-->
                                        <!--                              本月参与目标-->
                                        <div class="other-bottom-item">
                                            <span class="normal-font">本月参加目标数</span>
                                            <span class="weight-font">{{
                                                detailState.peopleDetail.goalsNum || 0
                                            }}</span>
                                            <span class="unit-font">个</span>
                                        </div>
                                        <!--                              本月参与目标-->
                                        <!--                              本月参与任务-->
                                        <div class="other-bottom-item">
                                            <span class="normal-font">本月参加任务数</span>
                                            <span class="weight-font">{{ detailState.peopleDetail.taskNum || 0 }}</span>
                                            <span class="unit-font">个</span>
                                        </div>
                                        <!--                              本月参与任务-->
                                        <!--                              任务工时-->
                                        <div class="other-bottom-item">
                                            <span class="normal-font">任务工时</span>
                                            <span class="weight-font">{{
                                                detailState.peopleDetail.taskHourInput || 0
                                            }}</span>
                                            <span class="unit-font">天</span>
                                            <span class="end-font"
                                                >/{{ detailState.peopleDetail.currentMonthHourInput || 0 }}</span
                                            >
                                            <span class="unit-font">天</span>
                                        </div>
                                        <!--                              任务工时-->
                                        <!--                              其他日报工时-->
                                        <div class="other-bottom-item">
                                            <span class="normal-font">其他日报工时</span>
                                            <span class="weight-font">{{
                                                detailState.peopleDetail.otherDailyHourInput || 0
                                            }}</span>
                                            <span class="unit-font">天</span>
                                            <span class="end-font"
                                                >/{{ detailState.peopleDetail.currentMonthHourInput || 0 }}</span
                                            >
                                            <span class="unit-font">天</span>
                                        </div>
                                        <!--                              其他日报工时-->
                                    </div>
                                </div>
                            </div>
                            <!--                    个人信息      -->
                            <!--                     平台、市场、交付-通用项目     -->
                            <div class="default-div">
                                <!--                            标题-->
                                <div class="default-title">
                                    <div class="default-title-img"></div>
                                    <div class="title-type">平台、市场、交付-通用项目</div>
                                    <div class="title-line"></div>
                                    <div class="title-workHour">
                                        <span class="title-normal-font">整体工时占比：</span>
                                        <span class="title-weight-font">{{
                                            detailState.defaultDetail.overallWorkHourRatio
                                        }}</span>
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title
                                                >通用项目投入总工时/全部项目工时投入(已排除其他日报工时)</template
                                            >
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                    <div class="title-score">
                                        <span class="title-normal-font">项目最终绩效总分数：</span>
                                        <span class="title-weight-font"
                                            >{{ detailState.defaultDetail.performanceScore }}分</span
                                        >
                                    </div>
                                    <div class="title-performance">
                                        <span class="title-normal-font">最终绩效分数：</span>
                                        <span class="title-weight-font blue-font"
                                            >{{ detailState.defaultDetail.finalPerformanceScore }}分</span
                                        >
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title>整体工时占比*通用项目绩效分数</template>
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                </div>
                                <!--                            标题-->
                                <!--                            内容-->
                                <div
                                    class="default-content"
                                    v-if="
                                        detailState.defaultDetail.employeeMonthlyGoalsDtoList &&
                                        detailState.defaultDetail.employeeMonthlyGoalsDtoList.length > 0
                                    "
                                >
                                    <div class="content-title">
                                        <div class="title-normal-font">项目名称</div>
                                        <div class="title-normal-font">角色</div>
                                        <div class="title-normal-font"
                                            >项目最终绩效分数
                                            <a-tooltip :overlayStyle="overlayStyle">
                                                <template #title
                                                    >团队负责人/负责人=项目月度绩效总分*通用项目下工时占比<br />
                                                    执行人=（项目月度绩效总分*0.2+工时分*0.8）*通用项目下工时占比</template
                                                >
                                                <ExclamationCircleOutlined style="margin-left: 4px" />
                                            </a-tooltip>
                                        </div>
                                        <div class="title-normal-font">项目月度绩效总分</div>
                                        <div class="title-normal-font"
                                            >工时占比分
                                            <a-tooltip :overlayStyle="overlayStyle">
                                                <template #title>此项目下已完成任务工时/此项目投入任务工时</template>
                                                <ExclamationCircleOutlined style="margin-left: 4px" />
                                            </a-tooltip>
                                        </div>
                                        <div class="title-normal-font">此项目投入任务总工时(h)</div>
                                        <div class="title-normal-font"
                                            >通用项目下工时占比
                                            <a-tooltip>
                                                <template #title
                                                    >此项目工时投入/全部项目工时投入(已排除其他日报工时)</template
                                                >
                                                <ExclamationCircleOutlined style="margin-left: 4px" />
                                            </a-tooltip>
                                        </div>
                                    </div>
                                    <a-collapse
                                        v-model:activeKey="detailState.defaultDetail.activeKey"
                                        :bordered="false"
                                        expandIconPosition="right"
                                    >
                                        <template #expandIcon="{ isActive }">
                                            <DownSquareOutlined
                                                v-if="!isActive"
                                                style="font-size: 16px; color: #595959"
                                            />
                                            <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
                                        </template>
                                        <a-collapse-panel
                                            v-for="(item, index) in detailState.defaultDetail
                                                .employeeMonthlyGoalsDtoList"
                                            :key="index"
                                        >
                                            <template #header>
                                                <div class="collapse-title">
                                                    <a-tooltip>
                                                        <template #title>{{ item.projectName }} </template>
                                                        <div class="collapse-weight-font">
                                                            <span class="too-long">{{ item.projectName }}</span>
                                                        </div>
                                                    </a-tooltip>

                                                    <div class="collapse-weight-font">{{ item.role }}</div>
                                                    <div class="collapse-weight-font">{{
                                                        item.projectPerformanceScore
                                                    }}</div>
                                                    <div>
                                                        <span
                                                            :class="getClass(item.projectScore)"
                                                            @click.stop="getScoreReason(item.id)"
                                                            >{{ item.projectScore }}</span
                                                        ></div
                                                    >
                                                    <div class="collapse-weight-font">{{ item.workHourScore }}</div>
                                                    <div class="collapse-weight-font">{{ item.goalsHour }}</div>
                                                    <div class="collapse-weight-font">{{
                                                        item.projectFractionRatio
                                                    }}</div>
                                                </div>
                                            </template>
                                            <div class="default-table">
                                                <a-table
                                                    :scroll="{ y: 200 }"
                                                    bordered
                                                    :columns="defaultColumns"
                                                    :data-source="item.taskDtoList"
                                                    :pagination="false"
                                                />
                                            </div>
                                        </a-collapse-panel>
                                    </a-collapse>
                                </div>
                                <!--                            内容-->
                            </div>
                            <!--                     平台、市场、交付-通用项目     -->

                            <!--                          交付模板项目-->
                            <div class="template-div">
                                <!--                            标题-->
                                <div class="template-title">
                                    <div class="template-title-img"></div>
                                    <div class="title-type">交付-模版项目</div>
                                    <div class="title-line"></div>
                                    <div class="title-workHour">
                                        <span class="title-normal-font">整体工时占比：</span>
                                        <span class="title-weight-font">{{
                                            detailState.templateDetail.overallWorkHourRatio
                                        }}</span>
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title
                                                >交付模板项目投入总工时/全部项目工时投入(已排除其他日报工时)</template
                                            >
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                    <div class="title-score">
                                        <span class="title-normal-font">模板项目最终绩效分数：</span>
                                        <span class="title-weight-font"
                                            >{{ detailState.templateDetail.performanceScore }}分</span
                                        >
                                    </div>
                                    <div class="title-performance">
                                        <span class="title-normal-font">最终绩效分数：</span>
                                        <span class="title-weight-font blue-font"
                                            >{{ detailState.templateDetail.templateProjectFinalPerformance }}分</span
                                        >
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title>整体工时占比*模板项目绩效分数</template>
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                </div>
                                <!--                            标题-->
                                <!--                            内容-->
                                <div
                                    class="template-content"
                                    v-if="
                                        detailState.templateDetail.templateProjectPerformanceDtoList &&
                                        detailState.templateDetail.templateProjectPerformanceDtoList.length > 0
                                    "
                                >
                                    <div class="template-content-title">
                                        <div class="title-normal-font">项目名称</div>
                                        <div class="title-normal-font">加减分</div>
                                        <div class="title-normal-font">此项目投入任务总工时(h) </div>
                                    </div>
                                    <a-collapse
                                        v-model:activeKey="detailState.templateDetail.activeKey"
                                        :bordered="false"
                                        expandIconPosition="right"
                                    >
                                        <template #expandIcon="{ isActive }">
                                            <DownSquareOutlined
                                                v-if="!isActive"
                                                style="font-size: 16px; color: #595959"
                                            />
                                            <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
                                        </template>
                                        <a-collapse-panel
                                            v-for="(item, index) in detailState.templateDetail
                                                .templateProjectPerformanceDtoList"
                                            :key="index"
                                        >
                                            <template #header>
                                                <div class="template-collapse-title">
                                                    <a-tooltip>
                                                        <template #title>{{ item.projectName }} </template>
                                                        <div class="collapse-weight-font">
                                                            <span class="template-too-long">{{
                                                                item.projectName
                                                            }}</span>
                                                        </div>
                                                    </a-tooltip>

                                                    <div
                                                        v-if="item.scoreChange > 0"
                                                        class="collapse-weight-font green-font"
                                                        >+{{ item.scoreChange }}</div
                                                    >
                                                    <div v-else class="collapse-weight-font red-font">{{
                                                        item.scoreChange
                                                    }}</div>
                                                    <div class="collapse-weight-font">{{ item.projectInputHours }}</div>
                                                </div>
                                            </template>
                                            <div class="default-table">
                                                <a-table
                                                    :pagination="false"
                                                    bordered
                                                    :columns="templateColumns"
                                                    :data-source="item.taskDtoList"
                                                    :scroll="{ y: 200 }"
                                                />
                                            </div>
                                        </a-collapse-panel>
                                    </a-collapse>
                                </div>
                                <!--                            内容-->
                            </div>
                            <!--                          交付模板项目-->
                            <!--                          无模板项目-->
                            <div class="template-div">
                                <!--                            标题-->
                                <div class="template-title">
                                    <div class="no-template-title-img">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink"
                                            width="24px"
                                            height="24px"
                                            viewBox="0 0 24 24"
                                            version="1.1"
                                        >
                                            <title>编组 46</title>
                                            <g
                                                id="页面-1"
                                                stroke="none"
                                                stroke-width="1"
                                                fill="none"
                                                fill-rule="evenodd"
                                            >
                                                <g id="编组-46">
                                                    <rect
                                                        id="矩形"
                                                        fill="#FFFFFF"
                                                        opacity="0"
                                                        x="0"
                                                        y="0"
                                                        width="24"
                                                        height="24"
                                                    />
                                                    <g id="编组-45" transform="translate(0.5, 0)" fill-rule="nonzero">
                                                        <path
                                                            d="M0,4.57142858 C0,2.04669829 2.04669829,0 4.57142858,0 L18.2857143,0 C20.8104446,0 22.8571429,2.04669829 22.8571429,4.57142858 L22.8571429,19.4285714 C22.8571429,21.9533017 20.8104446,24 18.2857143,24 L4.57142858,24 C2.04669829,24 0,21.9533017 0,19.4285714 L0,4.57142858 Z"
                                                            id="路径"
                                                            fill="#366DEB"
                                                        />
                                                        <path
                                                            d="M0,4.57142858 C0,2.04669829 2.04669829,0 4.57142858,0 L18.2857143,0 C20.8104446,0 22.8571429,2.04669829 22.8571429,4.57142858 L22.8571429,14.8571429 C22.8571429,17.3818731 20.8104446,19.4285714 18.2857143,19.4285714 L4.57142858,19.4285714 C2.0466983,19.4285714 0,17.3818731 0,14.8571429 L0,4.57142858 Z"
                                                            id="路径"
                                                            fill="#366DEB"
                                                        />
                                                        <path
                                                            d="M0,5.93537141 C0,3.87204345 0.889198283,1.0671286 3,1.0671286 L8.85660016,1.0671286 C10.2223347,1.06659582 10.7459775,1.77876493 11.4285714,2.93507871 L18.270936,2.93507871 C20.8036688,2.93507871 22.8571429,6.07471983 22.8571429,8.55048921 L22.8571429,18.5840919 C22.8571429,21.0598614 20.8036687,23.0671286 18.270936,23.0671286 L4.58620688,23.0671286 C2.05347411,23.0671286 0,21.0598613 0,18.5840919 L0,5.93537141 Z"
                                                            id="路径备份-8"
                                                            fill="#6896FF"
                                                            opacity="0.3"
                                                        />
                                                        <path
                                                            d="M0,8.2715297 C0,6.48956581 0.889198283,4.06714091 3,4.06714091 L8.85660016,4.06714091 C10.2223347,4.06668078 10.7459775,4.68173552 11.4285714,5.68036951 L18.270936,5.68036951 C20.8036688,5.68036951 22.8571429,8.39187599 22.8571429,10.5300391 L22.8571429,19.1954176 C22.8571429,21.3335807 20.8036687,23.0671286 18.270936,23.0671286 L4.58620688,23.0671286 C2.05347411,23.0671286 0,21.3335807 0,19.1954176 L0,8.2715297 Z"
                                                            id="路径备份-8"
                                                            fill="#6896FF"
                                                        />
                                                        <g id="编组-3" transform="translate(3, 9)" fill="#FFFFFF">
                                                            <path
                                                                d="M0,0.5 C0,0.367391766 0.0752548718,0.240214806 0.209209426,0.146446614 C0.343163981,0.0526784222 0.524845349,0 0.714285701,0 L9.28571425,0 C9.54090397,0 9.77670899,0.0952994524 9.90430385,0.249999994 C10.0318987,0.404700535 10.0318987,0.595299465 9.90430385,0.750000006 C9.77670899,0.904700548 9.54090397,1 9.28571425,1 L0.714285701,1 C0.319796601,1 0,0.77614238 0,0.5 L0,0.5 Z"
                                                                id="路径"
                                                            />
                                                            <path
                                                                d="M0,3.5 C0,3.22385763 0.317131631,3 0.708333322,3 L16.2916667,3 C16.6828684,3 17,3.22385763 17,3.5 C17,3.77614237 16.6828684,4 16.2916667,4 L0.708333322,4 C0.317131631,4 0,3.77614237 0,3.5 L0,3.5 Z"
                                                                id="路径"
                                                            />
                                                            <path
                                                                d="M0,6.5 C0,6.22385762 0.31713163,6 0.708333322,6 L16.2916667,6 C16.6828684,6 17,6.22385763 17,6.5 C17,6.77614237 16.6828684,7 16.2916667,7 L0.708333322,7 C0.520471639,7 0.340304282,6.94732158 0.207466015,6.85355339 C0.074627748,6.75978519 0,6.63260823 0,6.5 L0,6.5 Z"
                                                                id="路径"
                                                            />
                                                            <path
                                                                d="M0,9.5 C0,9.36739177 0.074627748,9.24021481 0.207466015,9.14644661 C0.340304282,9.05267842 0.520471639,9 0.708333322,9 L16.2916667,9 C16.6828684,9 17,9.22385763 17,9.5 C17,9.77614237 16.6828684,10 16.2916667,10 L0.708333322,10 C0.31713163,10 0,9.77614238 0,9.5 L0,9.5 Z"
                                                                id="路径"
                                                            />
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="title-type">交付-无模板项目（漳县、水泥配送、煤炭供应链）</div>
                                    <div class="title-line"></div>
                                    <div class="title-workHour">
                                        <span class="title-normal-font">整体工时占比：</span>
                                        <span class="title-weight-font">{{
                                            detailState.noTemplateDetail.overallWorkHourRatio
                                        }}</span>
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title
                                                >交付无模板推广项目投入总工时/全部项目工时投入(已排除其他日报工时)</template
                                            >
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                    <div class="title-score">
                                        <span class="title-normal-font">无模板项目最终绩效分数：</span>
                                        <span class="title-weight-font"
                                            >{{ detailState.noTemplateDetail.performanceScore }}分</span
                                        >
                                    </div>
                                    <div class="title-performance">
                                        <span class="title-normal-font">最终绩效分数：</span>
                                        <span class="title-weight-font blue-font"
                                            >{{ detailState.noTemplateDetail.templateProjectFinalPerformance }}分</span
                                        >
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title>整体工时占比*模板项目绩效分数</template>
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                </div>
                                <!--                            标题-->
                                <!--                            内容-->
                                <div
                                    class="template-content"
                                    v-if="
                                        detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList &&
                                        detailState.noTemplateDetail.ppmNoTemplatePerformanceDtoList.length > 0
                                    "
                                >
                                    <div class="template-content-title">
                                        <div class="title-normal-font">项目名称</div>
                                        <div class="title-normal-font">加减分</div>
                                        <div class="title-normal-font">此项目投入任务总工时(h) </div>
                                    </div>

                                    <a-collapse
                                        v-model:activeKey="detailState.noTemplateDetail.activeKey"
                                        :bordered="false"
                                        expandIconPosition="right"
                                    >
                                        <template #expandIcon="{ isActive }">
                                            <DownSquareOutlined
                                                v-if="!isActive"
                                                style="font-size: 16px; color: #595959"
                                            />
                                            <UpSquareOutlined v-else style="font-size: 16px; color: #595959" />
                                        </template>
                                        <a-collapse-panel
                                            v-for="(item, index) in detailState.noTemplateDetail
                                                .ppmNoTemplatePerformanceDtoList"
                                            :key="index"
                                        >
                                            <template #header>
                                                <div class="template-collapse-title">
                                                    <a-tooltip>
                                                        <template #title>{{ item.projectName }} </template>
                                                        <div class="collapse-weight-font">
                                                            <span class="template-too-long">{{
                                                                item.projectName
                                                            }}</span>
                                                        </div>
                                                    </a-tooltip>

                                                    <div
                                                        v-if="item.scoreChange > 0"
                                                        class="collapse-weight-font green-font"
                                                        >+{{ item.scoreChange }}</div
                                                    >
                                                    <div v-else class="collapse-weight-font red-font">{{
                                                        item.scoreChange
                                                    }}</div>
                                                    <div class="collapse-weight-font">{{ item.projectInputHours }}</div>
                                                </div>
                                            </template>
                                            <div class="default-table">
                                                <a-table
                                                    :pagination="false"
                                                    bordered
                                                    :columns="noTemplateColumns"
                                                    :data-source="item.noTemplateMilepostList"
                                                    :scroll="{ y: 200 }"
                                                />
                                            </div>
                                        </a-collapse-panel>
                                    </a-collapse>
                                </div>
                                <!--                            内容-->
                            </div>
                            <!--                          无模板项目-->
                            <!--                          行动项任务-->
                            <div class="action-div">
                                <!--                            标题-->
                                <div class="action-title">
                                    <div class="action-title-img"></div>
                                    <div class="title-type">行动项任务</div>
                                    <div class="title-line"></div>
                                    <div class="title-workHour">
                                        <span class="title-normal-font">整体工时占比：</span>
                                        <span class="title-weight-font">{{
                                            detailState.actionDetail.overallWorkHourRatio
                                        }}</span>
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title
                                                >行动项任务投入总工时/全部项目工时投入(已排除其他日报工时)</template
                                            >
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                    <div class="title-score">
                                        <span class="title-normal-font">行动项任务最终绩效分数：</span>
                                        <span class="title-weight-font"
                                            >{{ detailState.actionDetail.performanceScore }}分</span
                                        >
                                    </div>
                                    <div class="title-performance">
                                        <span class="title-normal-font">最终绩效分数：</span>
                                        <span class="title-weight-font blue-font"
                                            >{{ detailState.actionDetail.actionTaskFinalPerformance }}分</span
                                        >
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title>整体工时占比*行动项绩效分数</template>
                                            <ExclamationCircleOutlined style="margin-left: 4px" />
                                        </a-tooltip>
                                    </div>
                                </div>
                                <!--                            标题-->
                                <!--                            内容-->
                                <div
                                    class="default-content"
                                    v-if="
                                        detailState.actionDetail.taskPerformanceDtoList &&
                                        detailState.actionDetail.taskPerformanceDtoList.length > 0
                                    "
                                >
                                    <div class="default-table" style="margin: 0">
                                        <a-table
                                            :pagination="false"
                                            bordered
                                            :scroll="{ y: 200 }"
                                            :columns="actionColumns"
                                            :data-source="detailState.actionDetail.taskPerformanceDtoList"
                                        >
                                            <template #bodyCell="{ column, record, text, index }">
                                                <!--                       修正手动加减分               -->
                                                <template v-if="column.dataIndex === 'scoreChangeNum'">
                                                    <div v-if="record.scoreChangeNum > 0" class="green-font"
                                                        >+{{ record.scoreChangeNum }}</div
                                                    >
                                                    <div v-if="record.scoreChangeNum < 0" class="red-font">{{
                                                        record.scoreChangeNum
                                                    }}</div>
                                                    <div v-if="record.scoreChangeNum === 0"
                                                        >+{{ record.scoreChangeNum }}</div
                                                    >
                                                </template>
                                            </template>
                                        </a-table>
                                    </div>
                                </div>
                                <!--                            内容-->
                            </div>
                            <!--                          行动项任务-->
                            <!--                          日报、全勤奖-->
                            <div class="record-div">
                                <!--                            标题-->
                                <div class="record-title">
                                    <div class="record-title-img"></div>
                                    <div class="title-type">日报、全勤加减分明细</div>
                                    <div class="title-line"></div>
                                    <div class="title-performance">
                                        <span class="title-normal-font">最终绩效分数：</span>
                                        <span class="title-weight-font blue-font"
                                            >{{ detailState.recordDetail.finalPerformanceScore }}分</span
                                        >
                                    </div>
                                </div>
                                <!--                            标题-->
                                <!--                            内容-->
                                <div
                                    class="default-content"
                                    v-if="
                                        detailState.recordDetail.dailyPointsDtoList &&
                                        detailState.recordDetail.dailyPointsDtoList.length > 0
                                    "
                                >
                                    <div class="default-table" style="margin: 0">
                                        <a-table
                                            :scroll="{ y: 200 }"
                                            bordered
                                            :pagination="false"
                                            :columns="recordColumns"
                                            :data-source="detailState.recordDetail.dailyPointsDtoList"
                                        >
                                            <template #bodyCell="{ column, record, text, index }">
                                                <template v-if="column.dataIndex === 'score'">
                                                    <div v-if="record.score > 0" class="green-font"
                                                        >+{{ record.score }}</div
                                                    >
                                                    <div v-else class="red-font">{{ record.score }}</div>
                                                </template>
                                            </template>
                                        </a-table>
                                    </div>
                                </div>
                                <!--                            内容-->
                            </div>
                            <!--                          日报、全勤奖-->
                            <!--                          月度修正-->
                            <div class="correct-div">
                                <!--                            标题-->
                                <div class="correct-title">
                                    <div class="correct-title-img"></div>
                                    <div class="title-type">月度修正得分：</div>
                                    <span class="title-weight-font blue-font" style="margin-right: 12px"
                                        >{{ detailState.peopleDetail.scoreChangesNum || 0 }}分</span
                                    >
                                    <div class="title-line"></div>
                                    <div class="title-performance">
                                        <span class="title-normal-font">原因：</span>
                                        <span class="title-normal-font">{{
                                            detailState.peopleDetail.scoreChangesDetails
                                        }}</span>
                                    </div>
                                </div>
                                <!--                            标题-->
                            </div>
                            <!--                          月度修正-->
                            <!--                          非目标项目-->
                            <div class="record-div">
                                <!--                            标题-->
                                <div class="record-title">
                                    <div class="no-title-img">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink"
                                            width="23px"
                                            height="23.76px"
                                            viewBox="0 0 23 23.76"
                                            version="1.1"
                                        >
                                            <title>非目标项目任务</title>
                                            <g
                                                id="页面-1"
                                                stroke="none"
                                                stroke-width="1"
                                                fill="none"
                                                fill-rule="evenodd"
                                            >
                                                <g id="我的详情" transform="translate(-474.5, -1143)">
                                                    <g id="非目标项目任务" transform="translate(474, 1143)">
                                                        <rect id="矩形" x="0" y="0" width="24" height="24" />
                                                        <g id="编组" transform="translate(0.5, 0)" fill-rule="nonzero">
                                                            <path
                                                                d="M4.75862068,0.76 L18.2413793,0.76 C21.4137931,0.76 23,2.34620689 23,5.51862067 L23,19.0013793 C23,22.1737931 21.4137931,23.76 18.2413793,23.76 L4.75862068,23.76 C1.58620687,23.76 0,22.1737931 0,19.0013793 L0,5.51862067 C0,2.34620687 1.58620689,0.76 4.75862068,0.76 Z"
                                                                id="路径"
                                                                fill="#366DEB"
                                                            />
                                                            <path
                                                                d="M4.75862068,0 L18.2413793,0 C21.4137931,0 23,1.70399999 23,5.11199998 L23,17.892 C23,21.3 21.4137931,23.004 18.2413793,23.004 L4.75862068,23.004 C1.58620687,23.004 0,21.3 0,17.892 L0,5.11199998 C0,1.70399997 1.58620689,0 4.75862068,0 Z"
                                                                id="路径"
                                                                fill="#6896FF"
                                                            />
                                                            <g
                                                                id="编组-44"
                                                                transform="translate(2.16, 2.16)"
                                                                fill="#FFFFFF"
                                                            >
                                                                <path
                                                                    d="M16.2288,0 C17.9360226,0 19.32,1.43268879 19.32,3.19999998 L19.32,15.2 C19.32,16.9673112 17.9360226,18.4 16.2288,18.4 L3.0912,18.4 C1.38397738,18.4 0,16.9673112 0,15.2 L0,3.19999998 C0,1.43268879 1.38397739,0 3.0912,0 L16.2288,0 L16.2288,0 Z M16.2288,1.6 L3.0912,1.6 C2.2375887,1.6 1.5456,2.31634439 1.5456,3.19999998 L1.5456,15.2 C1.5456,16.0836556 2.23758869,16.8 3.0912,16.8 L16.2288,16.8 C17.0824113,16.8 17.7744,16.0836556 17.7744,15.2 L17.7744,3.19999998 C17.7744,2.31634439 17.0824113,1.6 16.2288,1.6 L16.2288,1.6 Z"
                                                                    id="形状"
                                                                />
                                                                <path
                                                                    d="M12.42,3.68 C14.1983569,3.68 15.64,5.0922218 15.64,6.83428569 L15.64,11.5657143 C15.64,13.3077782 14.1983569,14.72 12.42,14.72 L5.98,14.72 C4.20164311,14.72 2.76,13.3077782 2.76,11.5657143 L2.76,6.83428569 C2.76,5.0922218 4.20164312,3.68 5.98,3.68 L12.42,3.68 L12.42,3.68 Z M12.42,5.25714286 L5.98,5.25714286 C5.09082156,5.25714286 4.37,5.96325375 4.37,6.83428569 L4.37,11.5657143 C4.37,12.4367462 5.09082155,13.1428571 5.98,13.1428571 L12.42,13.1428571 C13.3091784,13.1428571 14.03,12.4367462 14.03,11.5657143 L14.03,6.83428569 C14.03,5.96325375 13.3091784,5.25714286 12.42,5.25714286 L12.42,5.25714286 Z"
                                                                    id="形状"
                                                                />
                                                                <path
                                                                    d="M8.09599999,8.28 L10.304,8.28 C10.7946667,8.28 11.04,8.51 11.04,8.96999999 L11.04,10.35 C11.04,10.81 10.7946667,11.04 10.304,11.04 L8.09599999,11.04 C7.60533333,11.04 7.36,10.81 7.36,10.35 L7.36,8.96999999 C7.36,8.51 7.60533333,8.28 8.09599999,8.28 Z"
                                                                    id="路径"
                                                                />
                                                            </g>
                                                            <polygon
                                                                id="路径"
                                                                fill="#0A3E47"
                                                                opacity="0.2"
                                                                points="14.6589802 5.36 15.5761581 8.18086009 23 6.15973687 23 10.842266 16.9156456 12.5547549 17.5694915 15.48 11.04 11.6794006"
                                                            />
                                                            <polygon
                                                                id="路径"
                                                                fill="#1250DB"
                                                                points="11.04 11.96 11.04 4.90057044 13.1732361 6.81690578 19.9444764 3.06954462e-14 23 3.08203974 16.4115519 9.82777873 18.3738912 11.9596024"
                                                            />
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="title-type">非目标项目任务</div>
                                    <div class="title-line"></div>
                                    <div class="title-performance">
                                        工时:
                                        <span class="title-weight-font blue-font">{{
                                            reasonState.noTargetData.performanceScore
                                        }}</span>
                                    </div>
                                </div>
                                <!--                            标题-->
                                <!--                            内容-->
                                <div
                                    class="default-content"
                                    v-if="
                                        reasonState.noTargetData.taskPerformanceDtoList &&
                                        reasonState.noTargetData.taskPerformanceDtoList.length > 0
                                    "
                                >
                                    <div class="default-table" style="margin: 0">
                                        <a-table
                                            :scroll="{ y: 200 }"
                                            bordered
                                            :pagination="false"
                                            :columns="reasonState.noTargetColumns"
                                            :data-source="reasonState.noTargetData.taskPerformanceDtoList"
                                        >
                                            <template #bodyCell="{ column, record, text, index }">
                                                <template v-if="column.dataIndex === 'score'">
                                                    <div v-if="record.score > 0" class="green-font"
                                                        >+{{ record.score }}</div
                                                    >
                                                    <div v-else class="red-font">{{ record.score }}</div>
                                                </template>
                                            </template>
                                        </a-table>
                                    </div>
                                </div>
                                <!--                            内容-->
                            </div>
                            <!--                          非目标项目-->
                        </div>
                        <!--                      选择人时显示员工绩效详情-->
                    </a-col>
                </a-row>
            </div>
            <a-modal
                title="项目月度绩效总分详情"
                v-model:visible="reasonState.visible"
                centered
                :body-style="{ padding: '15px 24px' }"
                width="700px"
                :footer="null"
            >
                <div class="detail-top-title">
                    <div class="detail-first">项目目标整体扣分：</div>
                    <div class="red-weight">{{ reasonState.totalDeductFraction }}</div>
                    <div class="detail-second">高层修正目标结果加减分：</div>
                    <div :class="['litter', Number(reasonState.correctFraction) < 0 ? 'red-weight' : 'green-font']">{{
                        reasonState.correctFraction
                    }}</div>
                </div>
                <div class="detail-item">当月计划完成未关联目标任务导致扣分</div>
                <div class="default-table" style="margin: 0">
                    <a-table
                        bordered
                        :pagination="false"
                        :columns="reasonState.columns"
                        :data-source="reasonState.isSelfData"
                        v-if="reasonState.isSelfData && reasonState.isSelfData.length > 0"
                    >
                        <template #bodyCell="{ column, record, text, index }">
                            <template v-if="column.dataIndex === 'taskPerformanceWeight'">
                                <!--                                <div v-if="record.taskPerformanceWeight > 0" class="green-font">+{{ record.taskPerformanceWeight }}</div>-->
                                <div class="red-font">-{{ record.taskPerformanceWeight }}</div>
                                <!--                                <div v-else class="red-font">{{ record.taskPerformanceWeight }}</div>-->
                            </template>
                        </template>
                    </a-table>
                </div>
                <div class="detail-item">他人未完成任务导致扣分</div>
                <div class="default-table" style="margin: 0">
                    <a-table
                        bordered
                        :pagination="false"
                        :columns="reasonState.columns"
                        :data-source="reasonState.otherData"
                        v-if="reasonState.otherData && reasonState.otherData.length > 0"
                    >
                        <template #bodyCell="{ column, record, text, index }">
                            <template v-if="column.dataIndex === 'taskPerformanceWeight'">
                                <!--                                <div v-if="record.taskPerformanceWeight > 0" class="green-font">+{{ record.taskPerformanceWeight }}</div>-->
                                <div class="red-font">-{{ record.taskPerformanceWeight }}</div>
                                <!--                                <div v-else class="red-font">{{ record.taskPerformanceWeight }}</div>-->
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-modal>
            <!--          绩效评分-->
            <a-modal
                title="绩效评分"
                v-model:visible="performanceScoreState.visible"
                :body-style="{ paddingBottom: 0 }"
                centered
                destroy-on-close
                @ok="submitPerformance"
            >
                <a-form :model="performanceScoreState.form" ref="performanceRef">
                    <a-form-item
                        v-if="!performanceScoreState.onlyOne"
                        label="项目总监评分"
                        name="directorChangeScore"
                        :rules="[
                            {
                                pattern: new RegExp(/^(0|1[0-5]|[1-9])$/),
                                message: '请输入0-15之间的整数',
                                trigger: 'blur'
                            }
                        ]"
                    >
                        <a-input-number
                            v-model:value="performanceScoreState.form.directorChangeScore"
                            style="width: 100%"
                            placeholder="请输入0-15之间的整数"
                        />
                    </a-form-item>
                    <a-form-item
                        v-if="performanceScoreState.onlyOne"
                        label="项目总监评分"
                        name="directorChangeScore"
                        :rules="[
                            {
                                pattern: new RegExp(/^(0|[1-9]|[1-2][0-9]|30)$/),
                                message: '请输入0-30之间的整数',
                                trigger: 'blur'
                            }
                        ]"
                    >
                        <a-input-number
                            v-model:value="performanceScoreState.form.directorChangeScore"
                            style="width: 100%"
                            placeholder="请输入0-30之间的整数"
                        />
                    </a-form-item>
                    <a-form-item
                        v-if="!performanceScoreState.onlyOne"
                        label="业务专家评分"
                        name="expertChangeScore"
                        :rules="[
                            {
                                pattern: new RegExp(/^(0|1[0-5]|[1-9])$/),
                                message: '请输入0-15之间的整数',
                                trigger: 'blur'
                            }
                        ]"
                    >
                        <a-input-number
                            v-model:value="performanceScoreState.form.expertChangeScore"
                            style="width: 100%"
                            placeholder="请输入0-15之间的整数"
                        />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!--          绩效评分-->
            <!-- end vid_i5vpkrwxor 自定义模板_91za6gac5d -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        getStaffTree()
        const lastMonth = dayjs().subtract(1, 'month')

        // 格式化时间为 yyyy-mm
        ygState.filter.month = lastMonth.format('YYYY-MM')
        detailState.detailDate = lastMonth.format('YYYY-MM')
        detailState.dateStr = lastMonth.format('YYYY年MM月')
        ygState.dateStr = lastMonth.format('YYYY年MM月')
    })
    function isCurrentMonth() {
        return dayjs(ygState.filter.month).isSame(dayjs(), 'month')
    }
    const ygState = reactive({
        expandedKeys: [],
        selectedKeys: [],
        checkedKeys: [],
        searchValue: '',
        dateStr: '',
        filter: {
            projectName: undefined,
            month: undefined
        },
        treeData: [],
        selected: {},
        projectNameList: [],
        tableData: [],
        selectedRowKeys: [],
        exportScoreVisible: false,
        addOrReduceVisible: false,
        fileList: [],
        staffType: 'DEPARTMENT',
        isTableIn: false
    })
    const overlayStyle = {
        maxWidth: 'unset'
    }
    const detailState = reactive({
        detailDate: '',
        dateStr: '',
        //   个人信息部分,
        peopleDetail: {
            userName: '',
            taskNum: '',
            projectNum: '',
            goalsNum: '',
            fraction: '',
            finalPerformanceScore: '',
            departmentName: '',
            goalsReportHourInput: '',
            otherDailyHourInput: ''
        },
        //   平台数据
        defaultDetail: {
            activeKey: [],
            dataSource: [],
            finalPerformanceScore: '',
            overallWorkHourRatio: '',
            performanceScore: ''
        },
        //     模板数据
        templateDetail: {
            activeKey: [],
            dataSource: []
        },
        // 日报全勤奖数据
        recordDetail: {
            dataSource: []
        },
        //     xdx人数据
        actionDetail: {
            dataSource: []
        },
        //     无模板数据
        noTemplateDetail: {}
    })
    const plusMinusPoints = reactive({
        type: '加分',
        score: undefined,
        detail: undefined
    })
    const columns = ref([
        { title: '序号', dataIndex: 'numIndex', align: 'center', width: 100, resizable: true },
        {
            title: '部门名称',
            dataIndex: 'departmentName',
            align: 'center',
            ellipsis: true,
            width: 115,
            resizable: true
        },
        { title: '人员姓名', dataIndex: 'userName', width: 100, align: 'center', ellipsis: true, resizable: true },
        { title: '参与项目数', dataIndex: 'projectNum', width: 105, align: 'center', ellipsis: true, resizable: true },
        { title: '参加目标数', dataIndex: 'goalsNum', width: 105, align: 'center', ellipsis: true, resizable: true },
        { title: '参加任务数', dataIndex: 'taskNum', width: 105, align: 'center', ellipsis: true, resizable: true },
        {
            title: '系统加减分',
            dataIndex: 'systemScoreChanges',
            width: 105,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        { title: '系统核算分数', dataIndex: 'fraction', width: 120, align: 'center', ellipsis: true, resizable: true },
        {
            title: '项目总监评分',
            dataIndex: 'projectDirectorFraction',
            width: 120,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '业务专家评分',
            dataIndex: 'businessExpertFraction',
            width: 120,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '修正手动加减分',
            dataIndex: 'scoreChangesNum',
            width: 135,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '修正加减分详情',
            dataIndex: 'scoreChangesDetails',
            width: '135px',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '最终绩效分数',
            dataIndex: 'finalPerformanceScore',
            width: 130,
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        { title: '操作', dataIndex: 'operate', width: 180, align: 'left', ellipsis: true, fixed: 'right' }
    ])
    const defaultColumns = ref([
        {
            title: '项目阶段',
            dataIndex: 'projectMilepost',
            align: 'left',
            ellipsis: true,
            width: 205,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    rowSpan: rowSpan
                }
            }
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            width: 284,
            align: 'left',
            ellipsis: true,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    style: {
                        borderLeft: 'none'
                    }
                }
            }
        },
        { title: '任务负责人', dataIndex: 'taskOwner', width: 103, align: 'left', ellipsis: true },
        { title: '任务执行人', dataIndex: 'taskParticipants', width: 261, align: 'left', ellipsis: true },
        { title: '任务完成情况', dataIndex: 'taskStatus', width: 117, align: 'center', ellipsis: true },
        { title: '任务目标分数', dataIndex: 'taskFraction', width: 120, align: 'center', ellipsis: true },
        { title: '任务得分情况', dataIndex: 'taskScore', width: 120, align: 'center', ellipsis: true },
        { title: '投入工时(h)', dataIndex: 'taskHourInput', width: 120, align: 'center', ellipsis: true }
    ])
    const templateColumns = ref([
        {
            title: '项目阶段',
            dataIndex: 'projectMilepost',
            align: 'left',
            ellipsis: true,
            width: 205,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    rowSpan: rowSpan
                }
            }
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            width: 348,
            align: 'left',
            ellipsis: true,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    style: {
                        borderLeft: 'none'
                    }
                }
            }
        },
        { title: '任务完成情况', dataIndex: 'taskStatus', width: 225, align: 'center', ellipsis: true },
        { title: '绩效加减分', dataIndex: 'scoreChangeNum', width: 150, align: 'center', ellipsis: true },
        { title: '加减分原因', dataIndex: 'pointTypeName', width: 157, align: 'center', ellipsis: true },
        { title: '投入工时(h)', dataIndex: 'workHours', width: 200, align: 'center', ellipsis: true }
    ])
    const noTemplateColumns = ref([
        {
            title: '项目阶段',
            dataIndex: 'milepostName',
            align: 'left',
            ellipsis: true,
            width: 205,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    rowSpan: rowSpan
                }
            }
        },
        { title: '项目阶段完成情况', dataIndex: 'milepostStatus', width: 225, align: 'center', ellipsis: true },
        { title: '绩效加减分', dataIndex: 'scoreChangeNum', width: 150, align: 'center', ellipsis: true },
        { title: '加减分原因', dataIndex: 'pointTypeName', width: 157, align: 'center', ellipsis: true },
        { title: '投入工时(h)', dataIndex: 'workHours', width: 200, align: 'center', ellipsis: true }
    ])
    const recordColumns = ref([
        { title: '工时对应时间', dataIndex: 'dailyDate', width: 300, align: 'center', ellipsis: true },
        { title: '触发时间', dataIndex: 'triggerTime', width: 300, align: 'center', ellipsis: true },
        { title: '触发分数', dataIndex: 'score', width: 300, align: 'center', ellipsis: true },
        { title: '原因', dataIndex: 'reason', width: 300, align: 'center', ellipsis: true }
    ])
    const actionColumns = ref([
        { title: '行动项任务名称', dataIndex: 'actionTaskName', width: 500, align: 'left', ellipsis: true },
        { title: '行动项任务完成情况', dataIndex: 'taskStatus', align: 'center', ellipsis: true },
        { title: '加减分', dataIndex: 'scoreChangeNum', align: 'center', ellipsis: true },
        { title: '加减分原因', dataIndex: 'pointTypeName', align: 'center', ellipsis: true },
        { title: '投入工时', dataIndex: 'workHours', align: 'center', ellipsis: true }
    ])

    // 树选择触发
    function treeSelect(a, selected) {
        if (ygState.selectedKeys.length == 1) {
            ygState.staffType = selected.node.type
            ygState.selected = selected.node
            getGroupTableData()
            ygState.filter.projectName = ''
            ygState.selectedRowKeys = []
            ygState.isTableIn = false
        }
    }

    const onSelectChange = selectedRowKeys => {
        ygState.selectedRowKeys = selectedRowKeys
    }
    watch(
        () => ygState.treeData,
        newVal => {
            if (!ygState.searchValue) {
                if (!newVal) {
                    return
                }
                ygState.selectedKeys = [newVal[0].staffInfoId]
                ygState.staffType = newVal[0].type
                ygState.selected.name = newVal[0].name
                getGroupTableData()
            }
        },
        { deep: true }
    )
    watch(
        () => detailState.detailDate,
        () => {
            if (detailState.detailDate) {
                const formattedDate = dayjs(detailState.detailDate, 'YYYY-MM').format('YYYY年MM月')
                detailState.dateStr = formattedDate
            }
        },
        { deep: true }
    )

    watch(
        () => ygState.filter.month,
        () => {
            if (ygState.filter.month) {
                const formattedDate = dayjs(ygState.filter.month, 'YYYY-MM').format('YYYY年MM月')
                ygState.dateStr = formattedDate
            }
        },
        { deep: true }
    )

    function getGroupTableData() {
        if (ygState.staffType === 'DEPARTMENT') {
            post('/solution-ppm/api/v2/built-in-system-ppm/emgf/list', {
                staffInfoId: ygState.selectedKeys[0],
                projectId: ygState.filter.projectName,
                month: ygState.filter.month
            }).then(data => {
                if (data.code === 200) {
                    if (ygState.filter.projectName) {
                        ygState.tableData = data.data
                    } else {
                        ygState.tableData = data.data
                    }
                }
            })
        } else if (ygState.staffType === 'EMPLOYEE') {
            getPtDetail(null, ygState.selected.name)
            getPeopleDetail(null, ygState.selected.name)
            getTemplateDetail(null, ygState.selected.name)
            getActionDetail(null, ygState.selected.name)
            getRecordDetail(null, ygState.selected.name)
            getNoTemplateDetail(null, ygState.selected.name)
            getNoTargetDetail(null, ygState.selected.name)
        }
    }

    function resetTableData() {
        ygState.filter.projectName = ''
        const lastMonth = dayjs().subtract(1, 'month')

        // 格式化时间为 yyyy-mm
        ygState.filter.month = lastMonth.format('YYYY-MM')
        detailState.detailDate = lastMonth.format('YYYY-MM')
        detailState.dateStr = lastMonth.format('YYYY年MM月')
        ygState.dateStr = lastMonth.format('YYYY年MM月')
        getGroupTableData()
    }

    // 获取平台、交付
    function getPtDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: ygState.filter.month
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/goals_list`, params).then(data => {
            if (data.code === 200) {
                data.data.employeeMonthlyGoalsDtoList = formatData(data.data.employeeMonthlyGoalsDtoList)
                detailState.defaultDetail = data.data
            } else {
                message.error(data.message)
                detailState.defaultDetail = {}
            }
        })
    }

    // 个人信息
    function getPeopleDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: ygState.filter.month
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/performance`, params).then(data => {
            if (data.code === 200) {
                detailState.peopleDetail = data.data
            } else {
                message.error(data.message)
                detailState.peopleDetail = {}
            }
        })
    }

    // 模板项目详情
    function getTemplateDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: ygState.filter.month
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/template_goals_list`, params).then(data => {
            if (data.code === 200) {
                data.data.templateProjectPerformanceDtoList.taskDtoList = formatData(
                    data.data.templateProjectPerformanceDtoList
                )
                detailState.templateDetail = data.data
            } else {
                // message.error(data.message)
                detailState.templateDetail = {}
            }
        })
    }

    function formatData(data) {
        return data.map(project => {
            project.taskDtoList = groupMilepostData(project.taskDtoList)
            return project
        })
    }

    // 行动项项目详情
    function getActionDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: ygState.filter.month
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/emgf/action_task_list`, params).then(data => {
            if (data.code === 200) {
                data.data.taskPerformanceDtoList = data.data.taskPerformanceDtoList
                detailState.actionDetail = data.data
            } else {
                // message.error(data.message)
                detailState.actionDetail = {}
            }
        })
    }

    // 日报详情
    function getRecordDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: ygState.filter.month
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/daily_list', params).then(data => {
            if (data.code === 200) {
                detailState.recordDetail = data.data
            } else {
                // message.error(data.message)
                detailState.recordDetail = {}
            }
        })
    }
    // 无模板项目详情
    function getNoTemplateDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: ygState.filter.month
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/no_template_goals_list', params).then(data => {
            if (data.code === 200) {
                detailState.noTemplateDetail = data.data
            } else {
                detailState.noTemplateDetail = {}
            }
        })
    }
    // 非目标项目任务
    function getNoTargetDetail(id, name) {
        const params = {
            id: id,
            name: name,
            month: ygState.filter.month
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/problem_task_list', params).then(data => {
            if (data.code === 200) {
                reasonState.noTargetData = data.data
            } else {
                reasonState.noTargetData = {}
            }
        })
    }

    // 格式化
    function groupMilepostData(data) {
        let currentProjectMilepost = ''
        return data.map((item, index) => {
            if (currentProjectMilepost !== item.projectMilepost) {
                currentProjectMilepost = item.projectMilepost
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (currentProjectMilepost === data[i].projectMilepost) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
            } else {
                item.rowSpan = 0
            }
            return item
        })
    }

    //
    //     筛选树接口
    function getTree() {
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/project_tree', {}).then(data => {
            if (data.code === 200) {
                ygState.projectNameList = data.data
            } else {
                message.error(data.message)
            }
        })
    }

    // 计算属性，用于找到选中的节点并组成对象数组
    const selectedObjects = computed(() => {
        const findNode = (nodes, value) => {
            for (let node of nodes) {
                if (node.projectId === value) {
                    return { projectName: node.projectName, projectId: node.projectId, nodeType: node.nodeType }
                }
                if (node.children) {
                    const result = findNode(node.children, value)
                    if (result) {
                        return result
                    }
                }
            }
            return null
        }

        return ygState.filter.projectName
            .map(value => findNode(ygState.projectNameList, value))
            .filter(item => item !== null)
    })
    const bodyStyle = {
        paddingTop: '12px',
        paddingBottom: '15px',
        paddingLeft: '24px',
        paddingRight: '24px'
    }

    //     导出模板
    function downScoreTemplate({ url, name }) {
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/download_template', null, {
            responseType: 'blob',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(res => {
            downloadExcel(res, '绩效.xlsx')
        })
    }

    function downloadExcel(response, name) {
        const blob = new Blob([response], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        })
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = name // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href)
        return href
    }

    function handlerUploadScore() {
        post(
            `/solution-ppm/api/v2/built-in-system-ppm/emgf/export_excel`,
            { month: ygState.filter.month },
            {
                responseType: 'arraybuffer'
            }
        ).then(res => {
            downloadExcel(res, '绩效分数.xlsx')
            ygState.exportScoreVisible = false
            ygState.fileList = []
        })
    }
    function closeExport() {
        ygState.exportScoreVisible = false
        ygState.fileList = []
    }

    function handlerUpload(file) {
        // 检查文件类型是否为 xlsx 或 xls
        if (!/\.xlsx?$/.test(file.name.toLowerCase())) {
            message.error('只能上传 xlsx 或 xls 文件')
            return false
        }

        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                if (data) {
                    ygState.fileList = [
                        ...ygState.fileList,
                        {
                            uid: file.uid,
                            lastModified: file.lastModified,
                            name: file.name,
                            size: file.size,
                            type: file.type,
                            status: 'done',
                            url: fullUrl
                        }
                    ]
                    const fileList = ygState.fileList.map(file => ({
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: file.status,
                        url: file.url
                    }))
                    console.log('调接口')
                    post('/solution-ppm/api/v2/built-in-system-ppm/emgf/upload_template', {
                        ppmEnclosureInfoList: fileList
                    }).then(data => {
                        if (data.code === 200) {
                            message.success('上传成功')
                        } else {
                            message.error(data.message)
                        }
                    })
                }
            })
            .catch(error => {
                // 处理文件上传失败情况
                message.error('上传文件失败')
            })

        return false
    }

    function handleRemove(file) {
        ygState.fileList = ygState.fileList.filter(item => item.uid !== file.uid)
    }

    const scoreRef = ref(null)

    function getStaffTree() {
        post('/solution-ppm/api/v2/built-in-system-ppm/emgf/staff_tree', { name: ygState.searchValue }).then(data => {
            if (data.code === 200) {
                ygState.treeData = data.data
            } else {
                message.error(data.message)
            }
        })
    }

    // 用法示例
    const recordChangesId = ref([])
    const recordChangeFlag = ref('批量')

    // 批量加减分
    function batchAdditionAndSubtractionPoints(flag, record) {
        recordChangeFlag.value = flag
        if (recordChangeFlag.value === '批量') {
            if (ygState.selectedRowKeys.length < 1) {
                message.info('请至少选择一条数据')
            } else {
                ygState.addOrReduceVisible = true
            }
        } else {
            plusMinusPoints.type = record.scoreChangesNum ? (record.scoreChangesNum > 0 ? '加分' : '减分') : '加分'
            plusMinusPoints.score = Math.abs(record.scoreChangesNum)
            plusMinusPoints.detail = record.scoreChangesDetails
            ygState.addOrReduceVisible = true
            recordChangesId.value = [record.id]
        }
    }

    const addOrReduceLoading = ref(false)

    //     保存加减分
    function handlerSubmitScore() {
        scoreRef.value.validate().then(() => {
            addOrReduceLoading.value = true
            put('/solution-ppm/api/v2/built-in-system-ppm/emgf/score_changes_batch', {
                idList: recordChangeFlag.value === '批量' ? ygState.selectedRowKeys : recordChangesId.value,
                changeType: plusMinusPoints.type,
                changeScore: plusMinusPoints.score,
                detail: plusMinusPoints.detail
            })
                .then(data => {
                    if (data.code === 200) {
                        message.success('操作成功')
                        ygState.addOrReduceVisible = false
                        getGroupTableData()
                    } else {
                        message.error(data.message)
                    }
                })
                .finally(() => {
                    addOrReduceLoading.value = false
                })
        })
    }

    // 清除表单
    function resetPlusMinusForm() {
        plusMinusPoints.type = '加分'
        plusMinusPoints.score = undefined
        plusMinusPoints.detail = undefined
    }

    // 列表查看详情
    function handlerDetail(record) {
        ygState.isTableIn = true
        ygState.staffType = 'EMPLOYEE'
        getPtDetail(record.id, null)
        getPeopleDetail(record.id, null)
        getTemplateDetail(record.id, null)
        getActionDetail(record.id, null)
        getRecordDetail(record.id, null)
        getNoTemplateDetail(record.id, null)
        getNoTargetDetail(record.id, null)
    }

    function handlerChangeDate(date) {
        console.log(date, 'date改变')
    }

    //     导出绩效分数
    function exportPerformanceScores() {
        console.log('1111')
        ygState.exportScoreVisible = true
    }

    const exportLoading = ref(false)
    const disabledDate = current => {
        // 获取当前日期的年月
        const currentYearMonth = dayjs(current).format('YYYY-MM')
        // 获取今天的年月
        const todayYearMonth = dayjs().format('YYYY-MM')
        // 禁用当月及以后的月份
        return currentYearMonth > todayYearMonth
    }
    function handleTaskResizeColumn(w, col) {
        col.width = w
    }

    const reasonState = reactive({
        visible: false,
        totalDeductFraction: '',
        correctFraction: '',
        columns: [
            {
                title: '项目阶段',
                dataIndex: 'milepostName',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '任务名称',
                dataIndex: 'taskName',
                width: 348,
                align: 'left',
                ellipsis: true
            },
            {
                title: '加减分',
                dataIndex: 'taskPerformanceWeight',
                align: 'center',
                ellipsis: true
            }
        ],
        isSelfData: [],
        otherData: [],
        noTargetColumns: [
            {
                title: '项目名称',
                dataIndex: 'projectName',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '项目阶段名称',
                dataIndex: 'milepostName',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '任务名称',
                dataIndex: 'taskName',
                width: 348,
                align: 'left',
                ellipsis: true
            },
            {
                title: '项目经理',
                dataIndex: 'pmName',
                align: 'left',
                ellipsis: true
            },
            {
                title: '产品经理',
                dataIndex: 'productName',
                align: 'left',
                ellipsis: true
            },
            {
                title: '计划完成时间',
                dataIndex: 'endTime',
                align: 'left',
                ellipsis: true,
                width: 205
            },
            {
                title: '投入工时',
                dataIndex: 'workHoursInput',
                align: 'center',
                ellipsis: true
            }
        ],
        noTargetData: {}
    })
    function getScoreReason(id) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/emgf/goal/${id}`).then(data => {
            reasonState.isSelfData = data.data.unRelatedTaskList
            reasonState.otherData = data.data.unFinishTaskList
            reasonState.totalDeductFraction = data.data.totalDeductFraction
            reasonState.correctFraction = data.data.correctFraction
            reasonState.visible = true
        })
    }
    function getClass(score) {
        let baseClass = 'collapse-weight-font'
        let additionalClass = ''

        if (score < 100) {
            additionalClass = 'warn-score'
        } else if (score === 100) {
            additionalClass = 'normal-score'
        } else if (score > 100) {
            additionalClass = 'good-score'
        }

        return [baseClass, additionalClass]
    }
    //     绩效评分
    const performanceScoreState = reactive({
        visible: false,
        form: {
            emId: null,
            directorChangeScore: 0,
            expertChangeScore: 0
        },
        onlyOne: false
    })
    function handlerPerformanceScoring(record) {
        get(`/solution-ppm/api/v2/built-in-system-ppm/emgf/director_expert/${record.id}`).then(data => {
            if (record.otherProjectPm) {
                performanceScoreState.onlyOne = true
                performanceScoreState.form.directorChangeScore = data.data.projectDirectorFraction
            } else {
                performanceScoreState.onlyOne = false
                performanceScoreState.form.directorChangeScore = data.data.projectDirectorFraction
                performanceScoreState.form.expertChangeScore = data.data.businessExpertFraction
            }
            performanceScoreState.visible = true
            performanceScoreState.form.emId = record.id
        })
    }
    const performanceRef = ref(null)
    function submitPerformance() {
        performanceRef.value.validate().then(data => {
            put(
                '/solution-ppm/api/v2/built-in-system-ppm/emgf/director_expert/score_changes',
                performanceScoreState.form
            ).then(data => {
                if (data.code === 200) {
                    message.success('操作成功')
                    performanceScoreState.visible = false
                    performanceScoreState.form = {
                        emId: null,
                        directorChangeScore: 0,
                        expertChangeScore: 0
                    }
                    getGroupTableData()
                } else {
                    message.error(data.message)
                }
            })
        })
    }

    const standardList = ref([])
    // 新-模板项目审核标准格式
    function handlerGetStandard(data) {
        standardList.value = data.scoreChangesDetails?.split(/[,;；]/)
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .ygjx-div {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .left-tree,
    .right-div {
        height: 100%;
        min-height: 800px;
        background-color: #fff;
    }

    .jx-detail {
        height: 100%;
        min-height: 800px;
    }

    .left-tree {
        padding: 16px 24px;
    }

    .tree-title {
        display: inline-block;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .right-div {
        padding: 20px 24px;
    }

    .right-title {
        display: inline-block;
        font-size: 18px;
        color: #3875ff;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .row-size {
        height: 32px;
        margin-bottom: 12px;
    }

    .ant-btn-primary {
        color: #3875ff;
        border-color: #3875ff;
    }
    .yg-table {
        width: 100%;
    }
    .yg-table :deep(.@{ant-prefix}-table-thead) > tr {
        height: 40px;
    }

    .yg-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #3875ff;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #ffffff;
        border-bottom: 1px solid #3875ff;
        padding: 8px 16px;
    }

    .yg-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }

    .export-title {
        width: 532px;
        height: 61px;
        background: rgba(56, 117, 255, 0.1);
        padding: 8px 16px;
        font-size: 14px;
        color: #262626;
        text-align: justify;
        line-height: 22px;
        font-weight: 400;
        display: flex;
        margin-bottom: 12px;
    }

    .export-content {
        display: inline-block;
        margin-left: 8px;
    }

    /*绩效详情*/
    .detail-top {
        height: 64px;
        border-radius: 2px;
        background-color: #fff;
        padding: 19px 24px;
        display: flex;
        margin-bottom: 16px;
        justify-content: space-between;
    }

    .detail-title {
        font-size: 18px;
        color: #262626;
        font-weight: 600;
    }

    .detail-msg {
        background: #ffffff;
        border-radius: 2px;
        height: 150px;
        padding: 16px 24px;
        display: flex;
    }

    .detail-name {
        display: flex;
        flex-direction: column;
        margin-left: 24px;
    }

    .avatar {
        margin: 9px 0;
        width: 60px;
    }

    .people-name {
        min-height: 50%;
        font-size: 24px;
        color: #1d2129;
        letter-spacing: 0;
        font-weight: 800;
        margin-right: 11px;
    }

    .department-title {
        font-size: 14px;
        color: #1d2129;
        letter-spacing: 0;
        font-weight: 800;
    }
    .title-tip {
        font-size: 14px;
        color: #1d2129;
        letter-spacing: 0;
    }
    .normal-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 8px;
    }

    .weight-font {
        font-size: 20px;
        color: #262626;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    .color-font {
        color: #3875ff;
    }

    .other {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .other-top,
    .other-bottom {
        height: 50%;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
        display: flex;
    }
    .other-bottom {
        position: relative;
        top: 10px;
    }

    .other-bottom span {
        bottom: 0;
    }

    .other-bottom-item,
    .other-top-item {
        flex: 1;
    }
    .other-bottom-item:first-child {
        flex: 1.2; /* 使第一个项目占用两倍于其他项目的空间 */
    }
    .other-bottom-item:last-child {
        flex: 1.2; /* 使第一个项目占用两倍于其他项目的空间 */
    }
    .unit-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    .end-font {
        font-size: 20px;
        color: #6f6f6f;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 600;
    }

    :deep(.ant3-collapse-header) {
        padding: 0 !important;
        border: none !important;
    }

    :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
        padding: 0 !important;
    }

    :deep(.ant3-collapse-item) {
        margin-bottom: 8px;
    }

    :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
        border-radius: 4px;
        color: #3875ff;
        border-color: #3875ff !important;
    }

    .expand {
        width: 30px;
        font-size: 14px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 400;
        margin-right: 30px;
        line-height: 40px;
    }

    /*
default-div平台、市场、交付-通用项目
*/
    .default-div,
    .template-div,
    .record-div,
    .correct-div,
    .action-div {
        margin-top: 16px;
        background: #ffffff;
        border-radius: 2px;
    }

    .record-div {
    }

    .correct-div {
    }

    .default-title,
    .template-title,
    .record-title,
    .correct-title,
    .action-title {
        padding: 13px 24px;
        background-image: linear-gradient(270deg, rgba(105, 173, 255, 0) 0%, rgba(56, 117, 255, 0.15) 100%);
        border-radius: 2px 2px 0 0;
        height: 48px;
        display: flex;
        line-height: 24px;
    }

    .default-content,
    .template-content {
        padding: 16px 24px;
    }

    .default-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442777026263121920.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .no-title-img {
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .template-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442804996583325696.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }
    .no-template-title-img {
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .record-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442808794796130304.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .correct-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442809384378957824.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .action-title-img {
        background-image: url('http://10.40.0.33:9001/file-storage/442835960772558848.png');
        background-size: cover;
        width: 24px;
        height: 24px;
        margin-right: 16px;
    }

    .title-type {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 600;
        margin-right: 12px;
    }

    .title-workHour {
        margin-right: 16px;
    }

    .title-line {
        height: 14px;
        width: 1px;
        background-color: #595959;
        margin-right: 12px;
        margin-top: 6px;
    }

    .title-weight-font {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .title-normal-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }

    .title-score {
        margin-right: 16px;
    }

    /*default-div平台、市场、交付-通用项目*/
    .content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 1.3fr repeat(6, 1fr);
        /* 根据需要调整列数 */
    }

    .collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 1.3fr repeat(6, 1fr);
        /* 根据需要调整列数 */
    }

    .collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .collapse-title div:nth-child(n + 2),
    .content-title div:nth-child(n + 2) {
        margin-right: 25px;
    }

    .collapse-title div:last-child {
        margin-right: 35px;
    }

    .content-title div:last-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-right: 35px;
    }

    .content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    :deep(.ant3-collapse-borderless > .ant3-collapse-item) {
        border: none;
    }

    :deep(.ant3-collapse-content-box) {
        background-color: #fff !important;
    }

    .collapse-weight-font {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .too-long,
    .template-too-long,
    .action-too-long {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        width: 210px;
    }

    .template-too-long {
        width: 300px;
    }

    .action-too-long {
        width: 250px;
    }

    .default-table {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f7f7f7;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr:not(:last-child)
        > th {
        border-bottom: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th {
        border-right: 1px solid #d9d9d9;
    }

    /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
    .default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
        border-left: none;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-thead
        > tr
        > th[colstart='0']:first-child {
        border-left: 1px solid #d9d9d9;
    }

    /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-header
        table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        > .@{ant-prefix}-table-content
        > table {
        border-top: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table-thead)
        > tr
        > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
            .@{ant-prefix}-table-row-expand-icon-cell
        ):not([colspan])::before {
        background: #d9d9d9;
        width: 1px;
    }

    /*表格*/
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td {
        border-right: 1px solid #d9d9d9;
    }

    .default-table
        :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
        .@{ant-prefix}-table-container
        .@{ant-prefix}-table-tbody
        tr
        > td:first-child {
        border-left: 1px solid #d9d9d9;
    }

    /*行动项任务*/
    /*default-div平台、市场、交付-通用项目*/
    .action-content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 1.3fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .action-collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 1.3fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .action-collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .action-collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .action-content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 16px;
    }

    .action-content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    /*模板任务*/
    /*default-div平台、市场、交付-通用项目*/
    .template-content-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: 2.1fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .template-collapse-title {
        background: #fbfcff;
        border-radius: 4px;
        height: 40px;
        border: 1px solid #3875ff;
        width: 100%;
        display: grid;
        grid-template-columns: 2.1fr repeat(5, 1fr);
        /* 根据需要调整列数 */
        gap: 10px;
        /* 根据需要调整间距 */
    }

    .template-collapse-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .template-collapse-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 48px;
    }

    .template-content-title div:first-child {
        justify-content: start;
        /* 水平居中对齐 */
        margin-left: 48px;
    }

    .template-content-title div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 水平居中对齐 */
    }

    .green-num,
    .red-num,
    .default-num {
        width: 50px;
        height: 20px;
        border-radius: 2px;
        line-height: 20px;
        margin: 0 auto;
    }

    .green-num {
        background: rgba(82, 196, 26, 0.1);
        border: 1px solid #52c41a;
        color: #52c41a;
    }

    .red-num {
        background: rgba(245, 34, 45, 0.1);
        border: 1px solid #f5222d;
        color: #f5222d;
    }

    .default-num {
        background: rgba(38, 38, 38, 0.1);
        border: 1px solid #bfbfbf;
        color: #262626;
    }

    :deep(.table-striped) td {
        background-color: #f8fafc;
    }

    .blue-font {
        color: #3875ff;
    }

    .red-font {
        color: #f5222d;
    }

    .green-font {
        color: #52c41a;
    }
    :deep(.ant3-select-selection-item) {
        max-width: 260px;
    }
    .tip {
        font-weight: 800;
    }
    .warn-score {
        color: red;
    }
    .good-score {
        color: #52c41a;
    }
    .normal-score {
        pointer-events: none; /* 禁止所有的鼠标和指针事件 */
        cursor: not-allowed; /* 鼠标指针显示为不允许的样式 */
    }
    .detail-top-title {
        display: flex;
        height: 30px;
        border-bottom: 1px solid #9bbaff;
    }
    .detail-first {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #262626;
        font-weight: 400;
    }
    .red-weight {
        font-size: 18px;
        color: #f5222d;
        font-weight: 600;
        margin-right: 24px;
    }
    .detail-second {
        font-size: 16px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .litter {
        font-size: 16px;
    }
    .detail-item {
        border-left: 4px solid #3875ff;
        padding-left: 8px;
        margin-top: 15px;
        height: 16px;
        line-height: 16px;
        margin-bottom: 12px;
    }
    .user-img {
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        top: 5px;
        cursor: pointer;
    }
    .disabled-div {
        background: rgba(38, 38, 38, 0.1);
        width: 100%;
    }
    .other-middle {
        height: 40px;
        background-color: #fef4d9;
        line-height: 40px;
        padding-left: 16px;
        color: #262626;
    }
    .short {
        height: 110px;
    }
</style>
